
<template>

    <div>

        <!-- <Form :model="formItem" :label-width="120">
        
            <Row :gutter="16">
                <Col span="8">
                    <FormItem label="请输入用户名：" >
                        <Input v-model="formItem.input" placeholder="请输入用户名/真实姓名/移动电话"></Input>
                    </FormItem>
                </Col>
                <Col span="6">
              <FormItem label="请选择用户名：" >
                <Select v-model="formItem.select">
                    <Option value="beijing">New York</Option>
                    <Option value="shanghai">London</Option>
                    <Option value="shenzhen">Sydney</Option>
                </Select>
            </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="请选择性别：">
                    <Select v-model="formItem.select2">
                        <Option value="1">男</Option>
                        <Option value="2">女</Option>
                        <Option value="3">未知</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
            
     
            <FormItem>
                <Row justify="center">
                    <Col span="8"  style="text-align: right;">
                         <Button type="primary">Submit</Button>
                        
                </Col>
                 <Col span="8" style="text-align: left;">
                             <Button style="margin-left: 8px">Cancel</Button>
                    </Col>
            </Row>
                
            </FormItem>
        </Form>

        <br/> -->
        <!-- <Table border :columns="columns" :data="data"  stripe></Table> -->




    <br/><br/><br/><br/>
    <template>
        <Table row-key="id" :columns="columnc" :data="datac" border stripe></Table>
    </template>


    </div>
    
</template>
<script>


export default {
    data() {
        return {
            formItem: {
                input: '',
                select:'',
                select1:''
            },
            columns: [
                {
                    title: '序号',
                    key: 'id',
                    align:"center",
                    width:'80px'
                },
                {
                    title: 'Name',
                    key: 'name'
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address'
                }
            ],
            data: [
                {
                    id:1,
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03'
                },
                {
                     id: 2,
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01'
                },
                {
                     id: 3,
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2016-10-02'
                },
                {
                     id: 4,
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2016-10-04'
                }
            ],

            columnc: [
                {
                    title: 'Name1',
                    key: 'name',
                    tree: true
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address'
                }
            ],
            datac: [
                {
                    id: '100',
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park'
                },
                {
                    id: '101',
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    children: [
                        {
                            id: '10100',
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park'
                        },
                        {
                            id: '10101',
                            name: 'Joe Blackn',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park'
                        },
                        {
                            id: '10102',
                            name: 'Jon Snow',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park',
                            children: [
                                {
                                    id: '1010200',
                                    name: 'Jim Green',
                                    age: 24,
                                    address: 'New York No. 1 Lake Park'
                                }
                            ]
                        }
                    ]
                },
                {
                    id: '102',
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park'
                },
                {
                    id: '103',
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park'
                }
            ]
        }
    }
}
</script>


<style lang="less">

.ivu-form-item  .ivu-form-item-label {
    font-size: 14px !important;
}

</style>



